<template>
  <div>

    <br>
    <!-- 搜索行 -->
    <el-row>
<<<<<<< HEAD
      <el-col :span="4" :offset="1">
=======
      <el-col :span="4" :offset="2">
>>>>>>> 7ed695747f2f61f03e4c07e7b29318cf6ab7d85a
        <template>
          <span>仓库编号</span>
          <el-select v-model="depotId" placeholder="请选择仓库编号" clearable filterable style="width: 150px;">
            <el-option v-for="depot in depotList" :key="depot.id" :label="depot.id" :value="depot.id">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="8">
        <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" @change="selectTime()" value-format="yyyy-MM-dd" :clearable="true">
        </el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-select v-model="sno" filterable placeholder="请选择选货单编号" clearable>
          <el-option v-for="item in snoList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="packInfo()" size="small">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="refresh()" icon="el-icon-refresh" size="small"></el-button>
      </el-col>
    </el-row>
    <br>

    <!-- 表数据 -->
    <el-row>
      <template>
        <el-table :data="packList" tooltip-effect="dark" style="width: 90%" class="table1">
          <el-table-column type="expand" width="20">
            <template slot-scope="scope">
              <el-table :data="scope.row.orderItems" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
                <el-table-column prop="goodsName" align="center" label="产品名称" width="100"></el-table-column>
                <el-table-column prop="goodsNumber" align="center" label="产品编号" width="100"></el-table-column>
                <el-table-column prop="meteriType" align="center" label="物料" width="50"></el-table-column>
                <el-table-column prop="categoryType" align="center" label="品类" width="50"></el-table-column>
                <el-table-column prop="purity" align="center" label="成色" width="70"></el-table-column>
                <el-table-column prop="weight" align="center" label="重量(g)" width="70"></el-table-column>
                <el-table-column prop="count" align="center" label="数量" width="50"></el-table-column>
                <el-table-column prop="unitPrice" align="center" label="单价(g/元)" width="110"></el-table-column>
                <el-table-column prop="num" align="center" label="库存数量" width="110"></el-table-column>
                <el-table-column prop="hasStock" align="center" label="库存状态" width="110"></el-table-column>
                <el-table-column prop="states" align="center" label="是否已填写需求单" width="140"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="序号" width="50" align="center" type="index">
          </el-table-column>
          <el-table-column prop="sno" label="选货单编号" width="200" align="center">
          </el-table-column>
          <el-table-column prop="depotId" label="仓库编号" width="50" align="center">
          </el-table-column>
          <el-table-column prop="creator" label="制单人" width="100" align="center">
          </el-table-column>
          <el-table-column prop="customer" label="客户" width="100" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="制单时间" width="150" align="center">
          </el-table-column>
          <el-table-column prop="totalPrice" label="总价" width="100" align="center">
          </el-table-column>
          <el-table-column label="操作" width="400" align="center">
            <template slot-scope="scope">
              <el-button type="success" size="mini" v-if="flagList[scope.$index] == true"
                @click="pack(scope)">打包</el-button>
              <el-button type="success" size="mini" v-if="flagList[scope.$index] == false"
                @click="demand(scope)">填写需求单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-row>

    <!-- 需求单框 -->
    <el-dialog title="需求列表" :visible.sync="dialogFormVisible">
      <template>
        <el-table :data="multipleSelection" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="goodsNumber" align="center" label="产品编号" width="150"></el-table-column>
          <el-table-column prop="count" align="center" label="数量" width="100"></el-table-column>
          <el-table-column prop="num" align="center" label="库存数量" width="100"></el-table-column>
          <el-table-column align="center" label="需求数量" width="150">
            <template slot-scope="scope">
              <el-input v-model.number="quantity[scope.$index]"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDemand()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-row>
      <template>
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
            :page-sizes="[10, 20, 30, 40]" :page-size="size" layout="prev, pager, next, jumper, sizes, total"
            :total="total">
          </el-pagination>
        </div>
      </template>
    </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 这里放数据
      current: 1,
      size: 10,
      total: 0,
      depotId: 1,
      depotList: [],
      sno: "",
      snoList: [],
      time: [],
      startTime: "",
      endTime: "",
      packList: [],
      packList2: [],
      flagList: [true],
      multipleSelection: [],
      dialogFormVisible:false,
      addDemandVo:{

      },
      quantity:[],
    }
  },
  methods: {
    confirmDemand:function(){
      let demandList = [];
      
      for(let i=0;i<this.multipleSelection.length;i++){
        var a={
          goodsNumber:null,
          quantity:null,
        }
        this.multipleSelection[i].quantity = parseInt(this.quantity[i]);
        console.log(this.multipleSelection[i].quantity);
        a.goodsNumber=this.multipleSelection[i].goodsNumber;
        a.quantity = this.multipleSelection[i].quantity;
        demandList.push(a);
      }
      
      let data = {
        sno:this.addDemandVo.sno,
        goodsList:demandList
      }
      console.log(data);
 
      this.$axios.post("salePack/addDemand",data).then(res=>{
        if(res.data.code==200){
          this.$message.success("需求单添加成功!");
        }else{
          this.$message.error("需求单添加失败:" + res.data.message);
        }

        this.dialogFormVisible = false;
        this.refresh();
      })
    },
    demand:function(scope){
      this.addDemandVo.sno = scope.row.sno;
      this.dialogFormVisible = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      for(let i=0;i<this.multipleSelection.length;i++){
        this.quantity[i] = parseInt(this.multipleSelection[i].count) - parseInt(this.multipleSelection[i].num)
      }
    },
    refresh: function () {
      window.location.reload();
    },
    pack: function (scope) {
      console.log(scope.row.sno);
      let data = {
        sno: scope.row.sno
      }
      this.$axios.post("salePack/add", data).then(res => {
        if (res.data.code == 200) {
          this.$message.success("打包成功!")
          this.refresh();
        } else {
          this.$message.error("打包失败:" + res.data.message)
        }
      })
    },
    findAllSno: function () {
      this.$axios.get("saleOrder/findAllSno").then(res => {
        if (res.data.code == 200) {
          this.snoList = res.data.data;
          console.log(res.data.data);
        }
      })
    },
    findAllDepot: function () {
      this.$axios.get("depot/listForInStock").then(res => {
        console.log(res.data.data);
        this.depotList = res.data.data;
      })
    },
    selectTime: function () {
      if (!this.time) {
        this.time = []
      }
      console.log(this.time);
      this.startTime = this.time[0];
      this.endTime = this.time[1];
    },
    //分页函数
    handleSizeChange(val) {
      //页面大小修改时触发
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getCurrentPageData();
    },
    handleCurrentChange(val) {
      //页码修改时触发
      console.log(`当前页: ${val}`);
      //给当前页属性赋值
      this.current = val;
      //发请求获取数据
      this.getCurrentPageData();
    },
    getCurrentPageData: function () {
      this.packInfo()
    },
    packInfo: function () {
      let data = {
        depotId: this.depotId,
        sno: this.sno,
        startTime: this.startTime,
        endTime: this.endTime,
        current: this.current,
        size: this.size,
      }
      console.log(data);
      this.$axios.post("saleOrder/packInfo", data).then(res => {
        console.log(res.data);
        this.packList2 = res.data.data.data;

        for (let i = 0; i < this.packList2.length; i++) {
          for (let j = 0; j < this.packList2[i].orderItems.length; j++) {
            if (this.packList2[i].orderItems[j].hasStock == "库存不足") {
              this.flagList[i] = false;
            }
          }
          if (this.flagList[i] != false) {
            this.flagList[i] = true;
          }

          for (let i = 0; i < this.flagList.length; i++) {
            console.log(this.flagList[i]);
          }

          this.packList = res.data.data.data;
          this.total = res.data.data.total;
          this.size = res.data.data.size;
        }
      })
    }
  },
  mounted: function () {
    this.findAllDepot();
    this.findAllSno();
    this.packInfo();
  }
}
</script>

<style scoped>
.table1,.table1 th,.table1 td{
  border: 5px dotted rgb(175, 239, 222);
}
.table1{
  margin-left: 55px;
}
</style>